<template>
  <header>
    <h1>大数据可视化 <span class="iconfont icon-qiehuan" @click="handleClick"></span></h1>
  </header>
  <router-view />
</template>

<script setup>
// import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const handleClick = () => {
  const currentRoute = route.path
  // 根据当前路由判断要跳转的下一个路由
  const nextRoute = currentRoute === '/' ? '/page' : '/'

  // 使用 router.push() 跳转到下一个路由
  router.push(nextRoute)
}

</script>

<style lang="less">
header {
  height: 1rem;
  width: 100%;
  // background-color: rgba(59, 130, 246, .05);

  h1 {
    color: #fff;
    text-align: center;
    line-height: 1rem;
    font-size: .5rem;

    .icon-qiehuan {
      font-size: .5rem;
    }
  }
}

body {
  background-image: url(./assets/bg.png);
  background-size: cover;
  // overflow: hidden;
  // background-repeat: no-repeat;
  // height: 100%;
  // background-color: pink;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
